<template>
    <div>

      begin<input type="text" v-model="demo.default.startDate">
      end <input type="text" v-model="demo.default.endDate">
      isShowMonthDegree<input
      type="checkbox"
      v-model="demo.default.isShowMonthDegree"    >
      isShowMonthLable<input
      type="checkbox"
      v-model="demo.default.isShowMonthLable"
    >
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

        <time-line-slider ref="slider" v-bind="demo.default" v-model="demo.default.value"></time-line-slider>

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>


      value--{{demo.default.value}}-格式化--{{currentVal}}

    </div>
</template>
<script>
    import timeLineSlider from './timeLineSlider';
    import moment from 'moment'
    export default {
        components: {timeLineSlider},
        name: 'time-slider-demo',
        data(){
            return {
                demo: {
                    default: {
                      startDate:"2003-01-01",
                      endDate:"2003-01-07",
                      value: new Date("2003-01-01").getTime(),
                      width: "100%",
                      tooltip: "always",//String, Boolean	always	control the tooltip, optional value: ['hover', 'always', false]


                      piecewiseStyle: {
                        "backgroundColor": "#ccc",
                        "visibility": "visible",
                        "width": "12px",
                        "height": "12px"
                      },
                      piecewiseActiveStyle: {
                        "backgroundColor": "#3498db"
                      },
                      labelActiveStyle: {
                        "color": "#3498db"
                      }
                    }
                }
            }
        },
        computed:{
          currentVal:function () {
            return moment(new Date(this.demo.default.value)).format("YYYY年MM月DD日")
          }
        }
    }
</script>

<style scoped>

</style>
